<template>
  <div class="quote-price-wrapper"  :class="{collapsedClass:!collapsed}">
    <a-card :bordered="false"  title="客户资料">
      <a-descriptions margin="0 2px" :column="5">
        <a-descriptions-item label="客户姓名">
          {{ row_record.name ? row_record.name : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="客户卡号">
          {{ row_record.card_no ? row_record.card_no : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="增值金">
          {{ amt ? amt.valueGold : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="积分剩余">
          {{ amt ? amt.usedIntegral : '-' }}
        </a-descriptions-item>
        <a-descriptions-item label="消费券剩余">
          {{ amt ? amt.usableTicketAmt : '-' }}
        </a-descriptions-item>
      </a-descriptions>
      <a-row style="margin-top: 20px;" type="flex" align="middle">
        <a-col :span="6">
          <a-form :form="form" layout="inline" >
            <a-form-item label="本次实收" >
              <a-input :value="1000"></a-input>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="18">
          <a-checkbox-group
            v-model="checkValue"
            :options="options"
            @change="onChangeCheckBox"
          />
        </a-col>
      </a-row>
      <!--表格-->
      <a-form :form="form" layout="inline"  style="margin-top:30px;">
        <a-table
          size="small"
          :scroll="{x:800}"
          class="table"
          :columns="tableColumns"
          :data-source="tableData"
          :pagination="false"
          :rowKey="(record,index)=>index">
          <!--序号-->
          <template slot="index" slot-scope="text,record,index">
            {{ index + 1 }}
          </template>
          <!--增值金抵扣-->
          <template slot="r" slot-scope="text, record">
            <a-form-item>
              <a-input
                type="number"
                v-decorator="[`l${record.index}`,{initialValue:text,rules: [{ required: true, message: '必填！' },{validator:(r,v,c)=> validatorDeduct(r,v,c,record,'l')}]}]"
                @change="e => handleChangeNumber(e.target.value, record, 'l')"/>
            </a-form-item>
          </template>
        </a-table>
      </a-form>
    </a-card>
    <div class="footer">
      <a-row type="flex" align="middle" style="margin-top: 5px;">
        <a-col :span="18">
          <div class="g-flex">
            <div><span>总金额</span><span class="g-color g-f-30" style="margin-left: 10px;">30000</span></div>
            <div style="margin-left: 50px;"><span>总收费</span><span class="g-color g-f-30" style="margin-left: 10px;">20000</span></div>
            <div style="margin-left: 50px;"><span>总差额</span><span  class=" g-f-30" style="margin-left: 10px;color: #E90303;">-10000</span></div>
          </div>
        </a-col>
        <a-col :span="6">
          <div class=" g-flex" >
            <a-button>取消</a-button>
            <a-button type="primary" style="margin-left: 30px;">确定</a-button>
          </div>
        </a-col>
      </a-row>
    </div>

  </div>
</template>

<script>

import { drawBill, getItemAndPrice} from '@/api/modular/main/customer/customerScene'
import { getConsultationAppeal } from '@/api/modular/main/customer/customerConsultation'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      row_record: {},
      confirmLoading: false,
      amt: {},
      itemAndPrice: {
        amt: {},
        MainlyItem: []
      },
      historyItem: [],
      //客户诉求列表
      ConsultationAppeal: [],
      form: this.$form.createForm(this),
      customerDetailsForm: {},
      tableData: [
        {
          a:'1', b:'1', c:'1', d:'1', e:'1', f:'1', g:'1', h:'1', i:'1', j:'1', k:'1',
          l:'800', m:'1', n:'1', o:'1', p:'1', q:'1',r:'3',z:'3'
        },
        {
          a:'2', b:'2', c:'2', d:'2', e:'2', f:'2', g:'2', h:'2', i:'2', j:'2', k:'2',
          l:'200', m:'2', n:'2', o:'2', p:'2', q:'2',r:'3',z:'3'
        },
        {
          a:'3', b:'3', c:'3', d:'3', e:'3', f:'3', g:'3', h:'3', i:'3', j:'3', k:'3',
          l:'600', m:'3', n:'3', o:'3', p:'3', q:'3',r:'3',z:'3'
        },
      ],
      visible: false,
      checkValue:[],
      tableColumns: [
        { title: '序号', scopedSlots: { customRender: 'index' }, width: 60, fixed: 'left' },
        { title: '审核', dataIndex: 'a', width: 80, ellipsis: true, fixed: 'left' },
        { title: '审核人', dataIndex: 'b', width: 80, ellipsis: true },
        { title: '活动', dataIndex: 'c', width: 100, ellipsis: true },
        { title: '科室', dataIndex: 'd', width: 80, ellipsis: true },
        { title: '项目名称', dataIndex: 'e', width: 80, ellipsis: true },
        { title: '数量', dataIndex: 'f', width: 80, ellipsis: true },
        { title: '单位', dataIndex: 'g', width: 80, ellipsis: true },
        { title: '原价', dataIndex: 'h', width: 70, ellipsis: true },
        { title: '折扣', dataIndex: 'i', width: 100, ellipsis: true },
        { title: '折扣说明', dataIndex: 'z', width: 100, ellipsis: true },
        { title: '应收金额', dataIndex: 'k', width: 100, ellipsis: true },
        { title: '未收金额', dataIndex: 'l', width: 80, ellipsis: true },
        { title: '本次实收', dataIndex: 'r', width: 100,scopedSlots: { customRender: 'r' }, ellipsis: true },
        { title: '转单人', dataIndex: 'm', width: 110, ellipsis: true },
        { title: '转单日期', dataIndex: 'n', width: 100, ellipsis: true },
        { title: '业务类型', dataIndex: 'o', width: 100, ellipsis: true },
        { title: '类型', dataIndex: 'p', width: 100, ellipsis: true },
        { title: '项目备注', dataIndex: 'q', width: 100, ellipsis: true }
      ],
      options : [
        { label: '顺序执行', value: '1' },
        { label: '金额优先', value: '2' }
      ]
    }
  },
  computed: {
    ...mapState({
      collapsed: state => state.app.sidebar
    })
  },
  mounted() {
    this.show()
  },

  methods: {
    show() {
      console.log('行数据', this.row_record)
      return
      const params = {
        triageId: this.row_record.triageId,
        customerId: this.row_record.customerId
      }
      getConsultationAppeal().then(res => {
        this.ConsultationAppeal = res.data
        getItemAndPrice(params).then(res => {
          console.log('头部数据：', res)
          this.historyItem = res.data.historyItem
        })
      })
    },
    /**
     表单校验
     * */
    validatorDeduct(rule, value, callback,record,column) {
      if (value < 0) {
        callback('必须为正数')
      }
      callback()
    },
    handleChangeNumber(value, record, column) {
      const parent_child_index = record.index
      this.tableData[parent_child_index][column] = value
    },
    handleChange(value, itemId, column) {
      const newData = [...this.tableData]
      const target = newData.filter(item => itemId === item.itemId)[0]
      if (target) {
        target[column] = value
        this.tableData = newData
      }
    },
    goBack() {
      this.$emit('goBack', false)
    },
    onChangeCheckBox(checkedValues) {
      console.log('checked = ', checkedValues)
      console.log('value = ', this.value)
    },
    /**
     提交表单
     * */
    submitForm() {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (errors) {
          console.log('表单检验未通过')
          this.confirmLoading = false
          return
        }
        const params = {
          consultItemList: consultItemList,
          consultRecordId: this.row_record.consultRecordId,
          customerId: this.row_record.customerId,
          receiveItemId: this.row_record.receiveItemId,
          receiveId: this.row_record.receiveId,
          triageId: this.row_record.triageId,
          SchemeContent: this.row_record.SchemeContent, //方案内容
          appealItemList: [values.quoteItemList],
          schemeId: this.row_record.schemeId
        }
        drawBill(params).then(res => {
          console.log('开单提交结果：', res)
          if (res.code == 200) {
            this.$message.success('开单成功')
            this.$emit('openBillSuccess')
            this.visible = false
          } else {
            this.$message.info(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      })
    }

  }
}
</script>

<style scoped>
.quote-price-wrapper {
  position: fixed;
  background: #ffffff ;
  height: 100%;
  z-index: 100;
  right: 12px;
  left: 240px;
}

.footer {
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.28);
  width: 100%;
  position: fixed;
  bottom: 0;
  background: #ffffff;
  padding-left: 20px;
  height: 60px;
  z-index: 999;
  margin-left: -24px;
}

/*/deep/ .table  .ant-input {*/
/*  border: none;*/
/*  padding: 2px 0 2px 5px;*/
/*}*/
</style>